<!DOCTYPE html>

<html style="height: 100%;">

<head>
    <meta charset="utf-8">
    <title>汇总统计图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .laytable-cell-radio.layui-table-cell {
            padding: 0 5px 0 15px;
        }
        
        .laytable-cell-radio span {
            display: none;
        }
        
        .laytable-cell-radio .layui-form-radio {
            padding-right: 0;
            margin: 0;
        }
    </style>
</head>

<body style="height: 95%;">
    <!--  <div class="layui-form" style="margin-left:20px;margin-top:15px;margin-bottom:20px">
        <div class="layui-form-item">
            <label class="layui-form-label">汇总年月</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="datetime" placeholder="请选择需要汇总的年月">
            </div>
            <button class="layui-btn" data-type="reload" id="serch">汇总</button>

        </div>
	</div> -->
    <label class="layui-form-label" style="width: 220px;font-size: 15px"><b><span class="arearegion"></span>医废收集情况(单位:吨)</b></label>
    <div id="main" style="height:55%;width:95%;margin-top: 40px"></div>
    <center>
        <table id="demo" lay-filter="test" style="height:45%;margin-top: 40px"></table>
    </center>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/layui/echarts.common.min.js"></script>
    <script src="../../layuiadmin/layui/jquery-3.3.1.min.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index']);
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#datetime', //指定元素
                type: 'month'
            });
        });
        var area;
        $.ajax({
            url: "../../../Cust/sessionRegion",
            type: "post",
            datatype: "json",
            success: function(res) {
                switch (parseInt(res.data)) {
                    case 0:
                        $(".arearegion").html('上城区');
                        area = '上城区';
                        addHangZhou(area);
                        break;
                    case 1:
                        $(".arearegion").html('下城区');
                        area = '下城区';
                        addHangZhou(area);
                        break;
                    case 2:
                        $(".arearegion").html('江干区');
                        area = '江干区';
                        addHangZhou(area);
                        break;
                    case 3:
                        $(".arearegion").html('拱墅区');
                        area = '拱墅区';
                        addHangZhou(area);
                        break;
                    case 4:
                        $(".arearegion").html('西湖区');
                        area = '西湖区';
                        addHangZhou(area);
                        break;
                    case 5:
                        $(".arearegion").html('滨江区');
                        area = '滨江区';
                        addHangZhou(area);
                        break;
                    case 6:
                        $(".arearegion").html('萧山区');
                        area = '萧山区';
                        addHangZhou(area);
                        break;
                    case 7:
                        $(".arearegion").html('余杭区');
                        area = '余杭区';
                        addHangZhou(area);
                        break;
                    case 8:
                        $(".arearegion").html('桐庐县');
                        area = '桐庐县';
                        addHangZhou(area);
                        break;
                    case 9:
                        $(".arearegion").html('建德市');
                        area = '建德市';
                        addHangZhou(area);
                        break;
                    case 10:
                        $(".arearegion").html('富阳区');
                        area = '富阳区';
                        addHangZhou(area);
                        break;
                    case 11:
                        $(".arearegion").html('临安区');
                        area = '临安区';
                        addHangZhou(area);
                        break;
                    case 12:
                        $(".arearegion").html('淳安县');
                        area = '淳安县';
                        addHangZhou(area);
                        break;
                }
            }
        })
        var myChart = echarts.init($('#main')[0]);
        myChart.showLoading();
        // 为echarts对象加载数据 
        $.ajax({
            url: "../../../All/all2",
            type: "post",
            datatype: "json",
            data: {
                date: 1
            },
            success: function(res) {
                myChart.hideLoading();
                if (res.data) {
                    var num_0 = $.parseJSON(res.data['0']); //ganran
                    var num_1 = $.parseJSON(res.data['1']); //res.data[1];sunshang
                    var num_2 = $.parseJSON(res.data['3']); // res.data[2];yaowu
                    var num_4 = $.parseJSON(res.data['2']); // res.data[3];bingli
                    var num_3 = [0, 0, 0]; //huaxue
                    var xyear = [];
                    for (var i = 0; i < num_0.length; i++) {
                        var xy = (2015 + i) + "年";
                        xyear.push(xy);
                    }
                    var option = {
                        color: ['#5CACEE', '#F08080', '#00A851', '#FF8711', '#D7E522'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {

                            data: ['感染性废物', '损伤性废物', '病理性废物', '药物性废物', '化学性废物']

                        },
                        grid: {
                            left: '4%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: xyear,
                            axisLabel: {
                                textStyle: {
                                    fontSize: '15',
                                    fontWeight: 'bold'
                                }
                            }
                        }],
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '感染性废物',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: '13',
                                        fontFamily: '微软雅黑',
                                        color: 'black'
                                    }
                                }
                            },
                            data: num_0
                        }, {
                            name: '损伤性废物',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: '13',
                                        fontFamily: '微软雅黑',
                                        color: 'black'
                                    }
                                }
                            },
                            data: num_1
                        }, {
                            name: '病理性废物',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: '13',
                                        fontFamily: '微软雅黑',
                                        color: 'black'
                                    }
                                }
                            },
                            data: num_2
                        }, {
                            name: '药物性废物',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: '13',
                                        fontFamily: '微软雅黑',
                                        color: 'black'
                                    }
                                }
                            },
                            data: num_4
                        }, {
                            name: '化学性废物',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: '13',
                                        fontFamily: '微软雅黑',
                                        color: 'black'
                                    }
                                }
                            },
                            data: num_3
                        }]
                    };
                    myChart.setOption(option);
                    var json = [{
                        "name": "感染性废物",
                    }, {
                        "name": "损伤性废物"
                    }, {
                        "name": "病理性废物"
                    }, {
                        "name": "药物性废物"
                    }, {
                        "name": "化学性废物"
                    }, {
                        "name": "合计"
                    }];


                    var col = [{
                        field: 'name',
                        title: '废物种类',
                        width: '15%',
                        align: 'center'
                    }]
                    for (var j = 0; j < num_0.length; j++) {
                        var thisyear = 2015 + j;
                        var xy = "y" + thisyear;
                        json[0][xy] = num_0[j].toFixed(2);
                        json[1][xy] = num_1[j].toFixed(2);
                        json[2][xy] = num_2[j].toFixed(2);
                        json[3][xy] = num_4[j].toFixed(2);
                        json[4][xy] = 0.00.toFixed(2);
                        json[5][xy] = (parseFloat(num_0[j]) + parseFloat(num_1[j]) + parseFloat(num_2[j]) + parseFloat(num_4[j])).toFixed(2);
                        col.push({
                            field: xy,
                            title: thisyear + "年",
                            width: "15%",
                            align: "center"
                        })
                    }
                    console.log(json)





                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#demo',
                            // height: 'full',
                            data: json,
                            cols: [
                                col
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    })
                }
            }
        });
    </script>
</body>

</html>